<!DOCTYPE html>
<html lang="en">
<head>
<title>Matrix Admin</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/handsontable.full.min.css">
    <link rel="stylesheet" type="text/css" href="../js/handsontable/main.css">
    <script src="../js/handsontable/handsontable.full.min.js"></script>
    <script src="../js/handsontable/jquery.min.js"></script>
    <script src="../js/handsontable/xlsx.full.min.js"></script>
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all">
    <script src="../js/layui/layui.js" charset="utf-8"></script>
   <!-- <script src="../js/resultsDisplay.js" ></script>-->
    <style type="text/css">
        .layui-badge-dot {
            width: 18px;
            height: 18px;

        }
        .layui-form-label {
            line-height: 30px;
            padding:0px;
        }
        .layui-form-select .layui-input {
            height: 30px;
        }
        .layui-inline {
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>

<div id="content" style="padding: 30px">
    <form id="searchForm" class="layui-form" action="" style="max-width:600px;display: inline;">
        <div class="layui-form-item">
            <label class="layui-form-label">函数名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">函数类型</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="other" >自定义函数</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">语言</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="testRadio1" name="1" value="Java" title="Java" >
                <input type="radio" lay-filter="testRadio1"  name="1" value="JavaScript" title="JavaScript"  >
                <input type="radio" lay-filter="testRadio1"  name="1" value="SQL" title="SQL"  >
            </div>
        </div>
        <div class="layui-form-item" id="javaDiv" style="display:none">
            <label class="layui-form-label">选择类名</label>
            <div class="layui-input-block">
                <select name="interest" lay-filter="aihao">
                    <option value="normal" selected >==请选择==</option>
                    <option value="normal" >business1.class</option>
                    <option value="report" >business2.class</option>
                    <option value="report" >business3.class</option>
                    <option value="report" >business4.class</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" id="javaScriptDiv" style="display:none">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                    <textarea placeholder="javascript脚本" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" id="sqlDiv" style="display:none">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                    <textarea placeholder="SQL脚本" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">单选框</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="testRadio" name="sex" value="false" title="无参数" checked="" >
                <input type="radio" lay-filter="testRadio"  name="sex" value="true" title="有参数"  >
            </div>
        </div>
        <div class="layui-form-item" id="mytable" style="display: none">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table id="demo"></table>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述说明</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
 </div>



<script>
    var mylayer = layui.layer;
    layui.use('form', function(){
        var form = layui.form;
        form.render();
        //radio 点击事件
        form.on('radio(testRadio)', function(data){
            if(data.value=="true"){
                $("#mytable")[0].style.display="block";
            }else{
                $("#mytable")[0].style.display="none";
            }
        });
        //radio 点击事件2
        form.on('radio(testRadio1)', function(data){
            if(data.value=="Java"){
                $("#javaDiv")[0].style.display="block";
                $("#javaScriptDiv")[0].style.display="none";
                $("#sqlDiv")[0].style.display="none";
            }else if(data.value=="JavaScript"){
                $("#javaDiv")[0].style.display="none";
                $("#javaScriptDiv")[0].style.display="block";
                $("#sqlDiv")[0].style.display="none";
               // toCodeView($("#javaScriptDiv"));
            }else if(data.value=="SQL"){
                $("#javaDiv")[0].style.display="none";
                $("#javaScriptDiv")[0].style.display="none";
                $("#sqlDiv")[0].style.display="block";
                //toCodeView($("#SQLDiv"));
            }
        });


    });

    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#demo'
            ,cellMinWidth: 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                ,{field:'paramName', title: '参数名', edit: 'text'}
                ,{field:'paramType', title: '参数类型' , edit: 'text'}
                ,{field:'desc', width:'60%', title: '描述说明' , edit: 'text'}
            ]]
            , data: [
                { paramName: "参数1", paramType: "String", desc: "xxx参数"},

            ]
        });
    });

    function toCodeView(html){
        mylayer.open({
            title: '编辑代码',
            shade: 0,
            type: 1
            ,id: '111' //防止重复弹出
            , area: ['800px', '550px']
            ,content: html
            ,btn: ['确定','取消']
            ,btnAlign: 'c' //按钮居中
            ,shade: 0 //不显示遮罩
            ,btn2: function(){
                layer.closeAll();
            }
        });
    }

</script>

</body>
</html>
